<!DOCTYPE html>
<html class="theme-next use-motion" lang="zh-Hans" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{theme/next/layout}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title th:text="${#servletContext.getAttribute('configMap')['blog_name']} + '|' + ${post.title}"></title>
    <link th:href="@{${prefix} + '/source/css/style.css'}" rel="stylesheet" type="text/css">
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

<div layout:fragment="content">
    <div id="content" class="content">
        <div id="posts" class="posts-expand">
            <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
                <div class="post-block">
                    <link itemprop="mainEntityOfPage" th:href="@{post.link}">
                    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
                          <meta itemprop="name" th:content="${#servletContext.getAttribute('configMap')['blog_name']}">
                          <meta itemprop="description" content>
                    </span>

                    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
                      <meta itemprop="name" th:content="${#servletContext.getAttribute('configMap')['blog_name']}">
                    </span>

                    <header class="post-header">
                        <h2 class="post-title" itemprop="name headline" th:text="${post.title}"></h2>
                        <div class="post-meta">

                            <span class="post-time">
                              <span class="post-meta-item-icon">
                                <i class="fa fa-calendar-o"></i>
                              </span>
                              <span class="post-meta-item-text">发表于</span>
                              <time title="创建于" itemprop="dateCreated datePublished" th:datetime="${post.publishDate}" th:text="${post.year} + '-' + ${post.month} + '-' + ${post.day}">
                              </time>
                            </span>

                            <span class="post-category">
                              <span class="post-meta-divider">|</span>
                              <span class="post-meta-item-icon">
                                <i class="fa fa-folder-o"></i>
                              </span>
                                <span class="post-meta-item-text">分类于</span>
                                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                                  <a th:href="@{'/categories/' + ${post.categoryName} + '/'}" itemprop="url" rel="index">
                                    <span itemprop="name" th:text="${post.categoryName}"></span>
                                  </a>
                                </span>
                            </span>

                            <span class="post-category">
                              <span class="post-meta-divider">|</span>
                              <span class="post-meta-item-icon">
                                <i class="fa fa-comment-o"></i>
                              </span>
                                <span class="post-meta-item-text">评论数</span>
                                <span itemprop="name" itemscope itemtype="http://schema.org/Thing" th:text="${post.commentNum}">0</span>
                            </span>

                            <span class="post-category">
                              <span class="post-meta-divider">|</span>
                              <span class="post-meta-item-icon">
                                <i class="fa fa-eye"></i>
                              </span>
                              <span class="post-meta-item-text">阅读数</span>
                              <span itemprop="name" itemscope itemtype="http://schema.org/Thing" th:text="${post.readNum}">0</span>
                            </span>
                        </div>
                    </header>

                    <div class="post-body" th:if="${post.reprint == true}" style="background: #dff0d8; color: #333; padding: 5px 10px; margin-bottom: 2rem;font-size: 14px;">
                        <ul>
                            <li>
                                <strong>原作者:</strong> <b>[[${post.author}]]</b>
                            </li>
                            <li>
                                <strong>原文链接:</strong> <a class="alert-link" th:href="@{${post.reprintLink}}" target="_blank" th:text="${post.reprintLink}"></a>
                            </li>
                        </ul>
                    </div>

                    <!-- 正文 -->
                    <div id="post-content" class="post-body" itemprop="articleBody" th:utext="${post.contentHtml}"></div>

                    <div id="share" class="shareContainer">
                        <div class="btns">
                            <button type="button" class="btn btn-default" id="priseBtn" th:data-id="${post.id}"><i class="fa fa-thumbs-o-up"></i>&nbsp;<span id="prizeCount">[[${post.praiseNum}]]</span></button>
                            <button type="button" class="btn btn-default" id="shareOpenBtn"><i class="fa fa-share-square-o"></i> 分享</button>
                        </div>
                        <div id="shareBtns" class="social-share" data-initialized="true">
                            <a href="#" class="social-share-icon icon-weibo"></a>
                            <a href="#" class="social-share-icon icon-qq"></a>
                            <a href="#" class="social-share-icon icon-qzone"></a>
                            <a href="#" class="social-share-icon icon-wechat"></a>
                        </div>
                    </div>

                    <div>
                        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
                            <div th:text="${#servletContext.getAttribute('configMap')['reward_comment']}"></div>
                            <button id="rewardButton" disable="enable"
                                    onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
                                <span>打赏</span>
                            </button>
                            <div id="QR" style="display: none;">
                                <div id="wechat" style="display: inline-block">
                                    <img id="wechat_qr" th:src="@{${#servletContext.getAttribute('configMap')['reward_by_we_chat_pay']}}" alt="微信支付">
                                    <p>微信支付</p>
                                </div>
                                <div id="alipay" style="display: inline-block">
                                    <img id="alipay_qr" th:src="@{${#servletContext.getAttribute('configMap')['reward_by_ali_pay']}}" alt="支付宝">
                                    <p>支付宝</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <ul class="post-copyright">
                            <li class="post-copyright-author">
                                <strong>本文作者：</strong>
                                [[${post.author}]]
                            </li>
                            <li class="post-copyright-link">
                                <strong>本文链接：</strong>
                                <a th:href="@{${#servletContext.getAttribute('configMap')['home_page'] + '/' + post.link}}" th:title="${post.title}" th:text="${#servletContext.getAttribute('configMap')['home_page'] + '/' + post.link}"></a>
                            </li>
                            <li class="post-copyright-license">
                                <strong>版权声明： </strong>
                                本博客所有文章除特别声明外，均采用 <a
                                    th:href="@{${#servletContext.getAttribute('configMap')['license_url']}}"
                                    rel="external nofollow" target="_blank" th:text="${#servletContext.getAttribute('configMap')['license']}"></a>
                                许可协议。转载请注明出处！
                            </li>
                        </ul>
                    </div>

                    <footer class="post-footer">
                        <div class="post-tags">
                            <div class="tags" th:if="${#strings.isEmpty(post.tags) == false}">
                                <i class="fa fa-tags"></i> <a th:href="@{'/tags/'+${tag}+'/'}" rel="tag" th:each="tag,status : ${#strings.arraySplit(post.tags, ',')}" th:text="${tag}"></a>
                            </div>
                        </div>
                        <div class="post-nav">
                            <div class="post-nav-next post-nav-item" th:if="${#objects.nullSafe(nextPost, null)}">
                                <a th:href="@{'/' + ${nextPost.link}}" rel="next"
                                   th:title="${nextPost.title}">
                                    <i class="fa fa-chevron-left"></i> [[${nextPost.title}]]
                                </a>
                            </div>
                            <span class="post-nav-divider"></span>
                            <div class="post-nav-prev post-nav-item" th:if="${#objects.nullSafe(previousPost, null)}">
                                <a th:href="@{'/' + ${previousPost.link}}" rel="prev"
                                   th:title="${previousPost.title}">
                                    [[${previousPost.title}]] <i class="fa fa-chevron-right"></i>
                                </a>
                            </div>
                        </div>
                    </footer>
                </div>

                <!-- 评论 -->
                <script type="text/javascript" th:inline="javascript">
                    window.canComment = [[${post.comment}]];
                </script>
                <div th:replace="~{theme/next/common :: comment(${post.comment})}"></div>

            </article>
            <div class="post-spread"></div>
        </div>
    </div>
</div>
</body>
</html>
